<template>
  <div style="width: 80%; margin: 0 auto;">

    <v-text-field
      v-model="question"
      label="提出问题"
      placeholder="请输入你的问题"
      outlined
      color="#0c422e"
      hide-details
      full-width
      clearable
      class="mainQuestion"
    >
      <template v-slot:append-outer>
        <v-btn dark color="#26A69A" height="56px" style="margin-top: -18px;"  @click="onQuestion"> 确认 </v-btn>
      </template>
    </v-text-field>

    <div style="text-align: left;">
      <div class="exampleTitle">问题示例:</div>
      <v-chip-group
        active-class="activeChip"
        v-model="question"
        column
      >
        <v-chip value="注释的定义是啥？">注释的定义是啥？</v-chip>
        <v-chip value="布尔表达式有相同的表达吗？">布尔表达式有相同的表达吗？</v-chip>
        <v-chip value="变量和基本数据类型这一章包含哪些概念？">变量和基本数据类型这一章包含哪些概念？</v-chip>
        <v-chip value="字典列表是什么？">字典列表是什么？</v-chip>
        <v-chip value="列表字典是什么？">列表字典是什么？</v-chip>
      </v-chip-group>
    </div>

    <div style="text-align: left; margin-top: 40px;">
      <div class="exampleTitle">答案展示:</div>
      <div class="answerPanel">
        {{ answer }}
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { HistoryService } from "@/services/history.service";

@Component({
  name: "Question"
})
export default class Question extends Vue {
  question: string = "";
  answer: string = "";

  onQuestion() {
    HistoryService.question(this.question).then((res: any) => {
      this.answer =  res.answer;
    }).catch((err: any) => {
      throw new Error(err);
    });
  }
}
</script>

<style scoped lang="scss">
.mainQuestion {
  height: 88px;
  margin-top: 64px;
}

.exampleTitle {
  text-align: left;
  font-weight: 500;
  margin-bottom: 4px;
  margin-top: 24px;
}

.activeChip {
  background-color: #26A69A;
}

.answerPanel {
  background-color: #E0F2F1;
  min-height: 120px;
  padding: 12px 16px;
  border-radius: 4px;
}

</style>
